<template>
  <div class="container">
    <div style="text-align:center;">
      <h3>课室信息修改</h3>
    </div>
    <hr />
    <table>
      <tr>
        <td style="width: 200px;" align="right">
          <span>课室名称：</span>
        </td>
        <td style="width: 600px;">
          <span style="width: 600px;">{{ tableData.name }}</span>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>英文名称：</span>
        </td>
        <td>
          <span style="width: 600px;">{{ tableData.englishName }}</span>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>校区：</span>
        </td>
        <td align="left">
          <el-button
            type="text"
            @click="openCampusList = true"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            <span>{{ tableData.campus.name }}</span>
          </el-button>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>功能区：</span>
        </td>
        <td align="left">
          <el-button
            type="text"
            @click="openAreaList = true"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            <span>{{ tableData.area.name }}</span>
          </el-button>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>座位数：</span>
        </td>
        <td>
          <el-input style="width: 150px" v-model.number="tableData.availableVolumn"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>行数：</span>
        </td>
        <td>
          <el-input style="width: 150px" v-model.number="tableData.rowNumber"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>列数：</span>
        </td>
        <td>
          <el-input style="width: 150px" v-model.number="tableData.columnNumber"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>最大容纳人数：</span>
        </td>
        <td align="left">
          <el-input style="width: 150px" v-model.number="tableData.maxCapcity"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>当前可容纳人数：</span>
        </td>
        <td>
          <el-input style="width: 150px" v-model.number="tableData.currentCapcity"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>类型：</span>
        </td>
        <td align="left">
          <el-button
            type="text"
            @click="openFieldTypeList = true"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            <span>{{ tableData.fieldType }}</span>
          </el-button>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <el-button type="primary" @click="update">确认</el-button>
          <el-button type="primary" @click="reset">取消</el-button>
          <el-button type="primary" @click="back">返回</el-button>
        </td>
      </tr>
    </table>
    <div>
      <!-- 校区筛选 -->
      <el-dialog title="选择校区" :visible.sync="openCampusList">
        <el-input placeholder="请输入关键字" v-model="campusKeyword">
          <template slot="prepend">校区名</template>
          <el-button slot="append" icon="el-icon-search" @click="getCampusByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="campusSelect">
          <el-radio
            v-for="(campus, index) in campusList"
            :key="'campus' + index"
            :label="campus"
          >{{ campus.name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="campusSelect = '',campusInit()">清 空</el-button>
          <el-button type="primary" @click="campusSelected">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 功能区筛选 -->
      <el-dialog title="选择功能区" :visible.sync="openAreaList">
        <el-input placeholder="请输入关键字" v-model="areaKeyword">
          <template slot="prepend">功能区名</template>
          <el-button slot="append" icon="el-icon-search" @click="getAreaByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="areaSelect">
          <el-radio
            v-for="(area, index) in areaList"
            :key="'area' + index"
            :label="area"
          >{{ area.name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="areaSelect = '',areaInit()">清 空</el-button>
          <el-button type="primary" @click="areaSelected">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 场地类型筛选 -->
      <el-dialog title="选择场地类型" :visible.sync="openFieldTypeList">
        <el-input placeholder="请输入关键字" v-model="fieldKeyword">
          <template slot="prepend">场地类型名</template>
          <el-button slot="append" icon="el-icon-search" @click="getFieldByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="fieldSelect">
          <el-radio
            v-for="(field, index) in fieldList"
            :key="'field' + index"
            :label="field.field_type_name"
          >{{ field.field_type_name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="fieldSelect = '',fieldTypeInit()">清 空</el-button>
          <el-button type="primary" @click="fieldSelected">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "update",
  props: {
    classroomDetails: Object,
  },
  data() {
    return {
      openCampusList: false, //校区筛选显示
      campusKeyword: "", //校区搜索关键词
      campusSelect: "", //校区选择
      campusList: [], //校区列表

      openAreaList: false, //功能区筛选显示
      areaKeyword: "", //功能区搜索关键词
      areaSelect: "", //功能区选择
      areaList: [], //功能区列表

      openFieldTypeList: false, //场地类型筛选显示
      fieldKeyword: "", //场地类型关键词
      fieldSelect: "", //场地类型选择
      fieldList: [], //场地类型列表

      //表格数据
      tableData: {
        name: "", //课室名称
        englishName: "", //英文名
        campus: "", //校区名
        area: "", //功能区名
        fieldType: "", //课室类型
        rowNumber: 0, //课室行数
        columnNumber: 0, //课室列数
        availableVolumn: 0, //座位数
        maxCapcity: 0, //最大容纳量
        currentCapcity: 0, //当前容纳量
      },
    };
  },
  created() {
    //表格数据初始化
    this.init();
    //获取校区列表
    this.getCompusList();
    //获取功能区列表
    this.getFunctionAreaList();
    //获取场地类型列表
    this.getFieldTypeList();
  },
  methods: {
    //表格数据初始化
    init() {
      this.campusInit();
      this.areaInit();
      this.fieldTypeInit();

      this.tableData.name = this.classroomDetails.name;
      this.tableData.englishName = this.classroomDetails.english_name;
      this.tableData.rowNumber = this.classroomDetails.row_number;
      this.tableData.columnNumber = this.classroomDetails.column_number;
      this.tableData.availableVolumn = this.classroomDetails.available_volumn;
      this.tableData.maxCapcity = this.classroomDetails.maxCapcity;
      this.tableData.currentCapcity = this.classroomDetails.currentCapcity;
    },
    campusInit() {
      let id;
      let name;
      this.tableData.campus = {
        id: this.classroomDetails.school_id,
        name: this.classroomDetails.school_name,
      };
    },
    areaInit() {
      let id;
      let name;
      this.tableData.area = {
        id: this.classroomDetails.area_id,
        name: this.classroomDetails.area_name,
      };
    },
    fieldTypeInit() {
      this.tableData.fieldType = this.classroomDetails.field_type_name;
      // let id;
      // let name;
      // this.tableData.area = {
      //   id: this.classroomDetails.field_type_id,
      //   name: this.classroomDetails.field_type_name,
      // };
    },
    /**===================确定选择的数据=================================== */
    //确定选择的校区
    campusSelected() {
      if (this.campusSelect != "") {
        this.tableData.campus = this.campusSelect;
      }
      this.openCampusList = false;
    },

    //确定选择的功能区
    areaSelected() {
      if (this.areaSelect != "") {
        this.tableData.area = this.areaSelect;
      }
      this.openAreaList = false;
    },

    //确定选择的场地类型
    fieldSelected() {
      if (this.fieldSelect != "") {
        this.tableData.fieldType = this.fieldSelect;
      }
      this.openFieldTypeList = false;
    },
    /**====================关键词搜索================================== */
    //校区关键词搜索
    getCampusByKeyword() {},

    //功能区关键词搜索
    getAreaByKeyword() {},

    //场地类型关键词搜索
    getFieldByKeyword() {},
    /**=====================获取列表=========================== */
    //获取校区列表
    getCompusList() {
      this.campusList = [
        { id: "1", name: "主校区" },
        { id: "2", name: "星湖校区" },
      ];
    },

    //获取功能区列表
    getFunctionAreaList() {
      this.areaList = [
        { id: "1", name: "第一教学楼" },
        { id: "2", name: "第二教学楼" },
        { id: "3", name: "第三教学楼" },
        { id: "4", name: "美术大楼" },
        { id: "5", name: "中巴科技园" },
      ];
    },

    //获取场地类型列表
    getFieldTypeList() {
      this.fieldList = [
        { id: "1", field_type_name: "传统教室" },
        { id: "2", field_type_name: "多媒体教室" },
        { id: "3", field_type_name: "实验室" },
      ];
    },
    /**===============按钮事件=========================== */
    //确定修改
    update() {
      this.$alert("修改课室", "修改成功", {
        confirmButtonText: "确定",
        callback: (action) => {
          //修改成功，返回页面
          this.$emit("closeUpdate", false);
        },
      });
    },

    //取消,还原修改的数据
    reset() {
      this.init();
    },

    //返回
    back() {
      this.$emit("closeUpdate", false);
    },
  },
};
</script>

<style scoped>
h3 {
  font-weight: 500;
}
p {
  float: right;
  font-weight: 300;
}
span {
  font-weight: 300;
}
.container {
  width: 100%;
  max-width: 100%;
  margin: 20px auto;
}
tr {
  padding: 10px;
  height: 50px;
  line-height: 50px;
}
</style>
